<!--
 * @Author: zhouwr 1551541860@qq.com
 * @Date: 2024-03-03 21:59:21
 * @LastEditors: zhouwr 1551541860@qq.com
 * @LastEditTime: 2024-03-04 22:56:54
 * @FilePath: /jeecgboot-vue3/src/components/Bpmn/src/BpmnModeler.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="canvas" ref="containerEl"></div>
</template>
<script lang="ts">
  import type { BpmnProps, BpmnMethods } from './typing'
  import { defineComponent, computed, ref, Ref, watch, unref, watchEffect, toRef, getCurrentInstance, nextTick, markRaw } from 'vue'
  import { bpmnProps } from './props'
  import { omit } from 'lodash-es'
  import { onMounted } from 'vue'

  export default defineComponent({
    name: 'BasicModal',
    components: {},
    inheritAttrs: false,
    props: bpmnProps,
    emits: ['xmlContentChange', 'register', 'update:xmlContent'],
    setup(props, { emit, attrs, slots }) {
      const xmlContentRef = ref('')
      const propsRef = ref<Partial<BpmnProps> | null>(null)
      const containerEl = ref<Partial<HTMLDivElement> | null>(null)

      /**
       * @description: 设置modal参数
       */
      const setBpmnProps = (bpmnProps: Partial<BpmnProps>): void => {
        propsRef.value = { ...(unref(propsRef) as Recordable), ...bpmnProps } as Recordable
      }

      const bpmnMethods: BpmnMethods = {
        setBpmnProps,
        getBpmnContainer: () => containerEl.value as HTMLElement,
      }

      const instance = getCurrentInstance()
      if (instance) {
        console.log('basicBpmn onMounted...', containerEl.value)
        emit('register', bpmnMethods, instance.uid)
      }

      // Custom title component: get title
      const getMergeProps = computed((): Recordable => {
        return {
          ...props,
          ...(unref(propsRef) as any),
        }
      })

      // modal component does not need title and origin buttons
      const getProps = computed((): Recordable => {
        const opt = {
          ...unref(getMergeProps),
          xmlContent: unref(xmlContentRef),
        }
        return {
          ...opt,
        }
      })

      const getBindValue = computed(() => ({ ...attrs, ...props, ...unref(getProps) }) as Recordable)

      watch(
        () => unref(xmlContentRef),
        (v) => {
          emit('xmlContentChange', v)
          emit('update:xmlContent', v)
        },
        {
          immediate: false,
        }
      )

      return {
        setBpmnProps,
        getProps,
        getMergeProps,
        omit,
        getBindValue,
      }
    },
  })
</script>
<style lang="less">
  .containers {
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
  }
  .canvas {
    width: 100%;
    height: 100%;
  }
  #properties-panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
  }
</style>
